import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import SubjectSearch from "./subjectSearch";
import { PageVo, Subject, SubjectQueryVo } from "@api/model";
import { remove, getById, update, save } from "@api/subject";
import subjectSearch from "./subjectSearch";

// 讲师表单的数据类型
interface SubjectForm {
    title: string;
    sort?: number;
}

// 讲师表单的响应式数据
const subjectFormReactive = reactive<{ subjectForm: SubjectForm }>({
    /*
       为了给reactive对象赋值，需要将对象定义为其中的一个属性。
      */
       subjectForm: {
        title: "",
        sort: 0,
    },
});

export default function subjectForm() {
    // 获取讲师列表数据
    const { getSubjectDataList } = SubjectSearch();
    // 对话框默认不可见
    const visible = ref(false);
    // 是否编辑用户
    const isEdit = ref(false);
    // 重置表单
    function resetSubjectForm() {
        subjectFormReactive.subjectForm = {
            title: "",
            sort: 0,
        };
    }
    function addSubject() {
        // 设置当前不是编辑模式：true代表添加  false代表更新
        isEdit.value = false
        // 开启输入框
        visible.value = true
    }

    // 更新教师信息的函数
    // 修改讲师
    function editSubject(id: string) {
        getById(id).then((subject: any) => {
            // 将请求响应的数据赋值给绑定了表单的响应式对象
            subjectFormReactive.subjectForm = subject.data;
            // 设置弹窗为编辑模式
            isEdit.value = true;
            // 显示弹窗
            visible.value = true;
        });
    }

    // 删除完成后，马上更新列表界面
    async function delSubject(id: string) {
        await ElMessageBox.confirm("确定要删除当前课程？", "提示", {
            type: "warning",
        });
        remove(id).then(() => {
            ElMessage.success("删除成功");
            getSubjectDataList();
        });
    }
    // 讲师表单的校验数据
    const rules = reactive({
        title: [
            { required: true, message: "请填写标题", trigger: "blur" },
            { min: 2, max: 20, message: "标题必须在2-20位字符", trigger: "blur" },
        ],
    });

    /*
     提交表单
     1. 校验表单
     2. 判断提交类型
     3. 新增或修改
     */
    // 获取当前组件实例对象
    const currentInstance = getCurrentInstance();
    function submit(event: MouseEvent) {
        (currentInstance?.refs.subjectFormRef as any).validate((valid: boolean) => {
            if (!valid) {
                return;
            }
            // 只有校验成功才会执行提交操作
            // 判断是编辑还是保存
            if (isEdit.value) {
                // 更新数据
                update(subjectFormReactive.subjectForm as Subject)
                    .then((resp: any) => {
                        ElMessage.success(resp);
                        visible.value = false;
                        // 更新视图
                        getSubjectDataList();
                    })

            } else {
                // 添加数据
                save(subjectFormReactive.subjectForm as Subject)
                    .then((resp: any) => {
                        ElMessage.success(resp);
                        visible.value = false;
                        // 更新视图
                        getSubjectDataList();
                    })
            }
        });
    }

    return {
        visible,
        resetSubjectForm,
        ...toRefs(subjectFormReactive),
        addSubject,
        editSubject,
        delSubject,
        submit,
        rules
    };
}